﻿@{
    ViewBag.Title = "Home Page";
}

@section scripts {
    <link href="~/Content/idatagrid.css" rel="stylesheet" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/moment-datepicker.js"></script>
<script src="~/Scripts/moment-datepicker-ko.js"></script>
    <script type="text/javascript">
        var vm = {
            data: ko.observableArray([({ date: ko.observable(new Date('2014-02-02')), lastName: ko.observable('Trần') }), ({ date: ko.observable(new Date('2012-12-31')), lastName: ko.observable('Dương') })]),
        };


        $(function () {
            ko.applyBindings(vm);

        });
    </script>
}

<div class="row">
    <div class="col-md-6" data-bind="grid: data, gridOptions: {
                                     columns: [{text: 'Date', field: 'date', sortable: true, type: IColumn.Type.Date, dateFormat: 'DD/MM/YYYY'}, 
                                                  {text: 'Last Name', field: 'lastName', sortable: true}],
                                     rowClick: function(){alert('hello');}}">

    </div>
    
    <div class="col-md-6" data-bind="grid: data, gridOptions: {columns: [{text: 'First Name', field: 'date'}, {text: 'Last Name', field: 'lastName'}]}">

    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <button data-bind="click: function() {vm.data.push({firstName: 'Hảo', lastName: 'Trần'});}">Add</button>
        <button data-bind="click: function() {vm.data.pop();}">Remove</button>
    </div>
</div>